<template>
	<view class="page">
		<jnavbar :title="'绑定手机'"></jnavbar>
		<u-form :model="form" ref="uForm">
			<u-form-item label-width="160rpx" label="手机号"><u-input placeholder="输入手机号" v-model="form.mobile" /></u-form-item>
			<u-form-item label-width="160rpx" label="验证码">
				<view class="u-flex">
					<u-input  placeholder="输入验证码" v-model="form.mycode" />
					<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-verification-code>
					<u-button  size="mini" @click="getcode">{{tips}}</u-button>
				</view>
				
			</u-form-item>
			<u-button type="primary" @click="bindphone">确认</u-button>
		</u-form>
	</view>
</template>

<script>
import {mapState, mapMutations} from 'vuex';
export default {
	data() {
		return {
			form:{
				mobile: '',
				mycode: '',
			},
			
			code: '',
			tips: '获取验证码',
			id: '',
			issend: false,
			seconds: 60,
			time: 0,
			minute: 0,
			reset: 0
		};
	},
	onLoad(e) {
		this.id = e.id;
	},
	methods: {
		timeUp() {
			this.issend = false;
		},
		codeChange(text) {
						this.tips = text;
		},
		end() {
			// this.$u.toast('倒计时结束');
		},
		start() {
			// this.$u.toast('倒计时开始');
		},
		codeChange(text){
			this.tips=text
		},
		bindphone() {
			if (this.form.mycode) {
				let params = {
					uid: this.id,
					mobile: this.form.mobile,
					code:this.form.mycode
				};
				this.$http('/user/register', params, 'POST').then(res => {
					if (res.statusCode == 200) {
						this.gettokenToUserInfo();
					}
				});
			} else {
				uni.showToast({
					title: '请输入正确的验证码',
					icon: 'none'
				});
			}
		},
		getcode() {
			if (this.form.mobile == '') {
				uni.showToast({
					title: '手机号不能为空',
					icon: 'none'
				});
				return false;
			} else if (!this.$u.test.mobile(this.form.mobile)) {
				uni.showToast({
					title: '请填写正确的号码',
					icon: 'none'
				});
				return false;
			}
			if (this.$refs.uCode.canGetCode) {
				this.$http('/login/code/' + this.form.mobile, {}, 'GET').then(res => {
					if (res.statusCode == 200) {
						this.code = res.data.msg;
						this.$refs.uCode.start();
					}
				});
			}
		},
		gettokenToUserInfo() {
			let params = {};
			this.$http('/user/tokenToUserInfo', params, 'GET').then(res => {
				if (res.statusCode == 200) {
					let UserInfo = res.data.msg;
					// this.$store.commit('setUserInfo', UserInfo);
					this.userCenter(UserInfo)
					
				} else {
					this.$store.commit('setUserInfo', {});
					this.$store.commit('settoken', null);
				}
			});
		},
		userCenter(UserInfo) {
			let params = {};
			this.$http('/user/UserCenter', params, 'GET').then(res => {
				let centerinfo = res.data.msg;
				let myUserInfo = Object.assign({}, UserInfo, centerinfo);
				this.$store.commit('setUserInfo', myUserInfo);
				uni.navigateBack();
			});
		},
		
	}
};
</script>

<style lang="scss">
	.page{
		padding: 0 32rpx;
		background: #fff;
		height: 100vh;
	}
.uni-block-form {
	width: 686rpx;
	border-radius: 12rpx;
	margin-left: 32rpx;
	padding: 16rpx 24rpx;
	.title {
		border-bottom: 1rpx solid #f5f5f5;
		padding: 16rpx 0;
	}
	.item {
		height: 100rpx;
		.label {
			width: 140rpx;
		}
		input {
			border: none;
			flex: 1;
		}
		.code_btns {
			width: 160rpx;
			font-size: 12rpx;
			border: 1rpx solid #ff3c29;
			color: #ff3c29;
			border-radius: 20rpx;
			text-align: center;
			padding: 5rpx 0;
		}
		.timeout {
			color: #999;
			width: 180rpx;
			border: 1rpx solid #999;
		}
	}

	.btns {
		justify-content: center;
		text {
			width: 686rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 12rpx 20rpx;
			border-radius: 16rpx;
		}
	}
}
</style>
